
<template>
  <div class="addApiBtn">
    <el-button type="text" size="small"  icon="el-icon-plus" @click="goAdd">新增</el-button>
    <el-drawer
        title="新增API"
        :size="800"
        :destroy-on-close="true"
        :visible.sync="drawer">
      <apiForm ref="apiForm"></apiForm>
      <div class="btnBox">
        <el-button type="info" plain style="margin-right: 30px" @click="drawer=false">取消</el-button>
        <el-button type="primary" style="margin-right: 20px" @click="submit">确定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import apiForm from "@/views/APImanage/module/apiForm";
export default {
  name: "addApiBtn",
  props:{
    systemId:{
      default:''
    }
  },
  components:{
    apiForm
  },
  methods:{
    goAdd(){
      if(this.systemId == ''){
        this.$message.warning('请优先选择对应的模块架构')
        return
      }
      this.drawer=true
    },
    submit(){
      this.$refs.apiForm.getData().then(data=>{
        let params = {
          systemId: this.systemId,
          ...data
        }
        this.$api.addApiMethod(params).then(res=>{
          this.$message.success('新增成功')
          this.drawer = false
          this.$emit('after-op')
        })
      })
    },
  },
  data(){
    return {
      drawer:false
    }
  },
}
</script>

<style scoped lang="less">
.btnBox{
  display: flex;
  flex-direction: row-reverse;
}
</style>